<template>
	<div class="main">
		<cl-crud @load="onLoad">
			<template #slot-top="{scope}">
				<div class="slot-top">
					<div class="slot-top-c">
						<div class="l">
							<div @click="$emit('backList')">
								<icon-svg name="return_btn"></icon-svg> <span>返回</span>
							</div>
							<div>{{ item.tljName }}</div>
							<div class="d">
								<div>
									<span>开始时间：{{ item.startTime | dateFormatLine }}</span>
									<!-- <span>结束时间：{{ item.endTime | dateFormatLine }}</span> -->
								</div>
								<div>
									<span>总数</span>
									<span>{{ item.total }}</span>
								</div>
								<div>
									<span>已领取</span>
									<span>{{ item.total - item.surplus }}</span>
								</div>
								<div>
									<span>剩余</span>
									<span>{{ item.surplus }}</span>
								</div>
								<!-- <div>
									<span>单个金额</span>
									<span>￥{{ item.perface }}</span>
								</div> -->
							</div>
						</div>
						<div class="r">
							<div class="imgs">
								<a :href="item.link" target="_black"
									><img :src="item.pic" alt=""
								/></a>
							</div>
							<div class="d">
								<div>
									<a target="_black" :href="item.link">{{ item.title }}</a>
								</div>
								<div>{{ item.shopName }}</div>
								<div>
									商品ID：{{ item.gid }}
									<div class="copys" v-copy="item.couponUrl">
										复制优惠券链接
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="slot-top-l"></div>
				</div>
			</template>
			<!-- 创建时间 -->
			<template #table-column-createTime="{scope}">
				<span> {{ scope.row.createTime | dateFormatLine }}</span>
			</template>
			<!-- 筛选状态 -->
			<template #slot-filter>
				<div class="filter-bar"></div>
			</template>
			<!-- 复制淘口令 -->
			<template #table-column-tkl="{scope}">
				<div class="info">
					<p>
						{{ scope.row.tkl || '无' }}
						<i
							class="el-icon-copy-document"
							v-copy="scope.row.tkl"
							v-if="scope.row.tkl"
							title="复制淘口令"
						></i>
					</p>
				</div>
			</template>
		</cl-crud>

		<cl-form ref="cl-form"></cl-form>
	</div>
</template>

<script>
import { Task_Status } from '@/dict/index';
export default {
	data() {
		return {
			crud: null,
			selectRow: [], // 当前选中多少行
			statusType: '',
			item: {},
			selects: {},
			options: {
				status: [],
				userList: []
			}
		};
	},
	mounted() {
		this.options.status = Task_Status;
	},
	methods: {
		// 刷新详情列表
		detailRefresh(item) {
			this.item = item;
			console.log('this.item', this.item);
			this.crud.refresh({
				id: this.item.id,
				app: 'yzf',
				type: 1
			});
		},
		refresh(data) {
			this.crud.refresh(data);
		},
		onTaskTypeChange(val) {
			this.refresh({
				receiveStatus: val
			});
		},
		onTaskStatusChange(val) {
			this.refresh({
				status: val
			});
		},
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.goodsMenagement.goods)
				.set('dict', {
					label: {
						add: '添加用户'
					},
					api: {
						page: 'flashGoodsReceiveList'
					}
				})
				.set('table', {
					on: {
						'selection-change': selection => {
							this.selectRow = selection;
						}
					},
					columns: [
						{
							type: 'selection',
							align: 'center',
							width: 60
						},
						{
							label: '序号',
							type: 'index',
							align: 'center'
						},
						{
							label: '标题',
							prop: 'title',
							align: 'center',
							'min-width': '200'
						},
						{
							label: '领取用户',
							prop: 'nickName',
							align: 'center',
							emptyText: '暂无',
							'min-width': '120'
						},
						{
							label: '淘口令',
							prop: 'tkl',
							align: 'center',
							emptyText: '暂无',
							'min-width': '200'
						},
						{
							label: '手机号',
							prop: 'phone',
							align: 'center',
							emptyText: '暂无',
							'min-width': '120'
						},
						{
							label: '淘礼金金额',
							prop: 'shoptype',
							align: 'center',
							'min-width': '120'
						},
						{
							label: '补贴金额',
							prop: 'mdMoney',
							align: 'center'
						},
						{
							label: '领取时间',
							prop: 'createTime',
							align: 'center',
							'min-width': '150'
						}
					],

					op: {
						layout: ['delete']
					}
				})
				.set('layout', [
					['slot-top'],
					['refresh-btn', 'flex1', 'slot-filter', 'slot-datepicker'],
					['data-table'],
					['flex1', 'pagination']
				])
				// .on('refresh', async (params, { next }) => {
				// 	let { list } = await next(params);
				// 	// list.map(e => {
				// 	// 	e.balance = '￥' + e.balance;
				// 	// 	e.withdraw = '￥' + e.withdraw;
				// 	// });
				// })
				.done();

			// 传值过来之后再刷新  detailRefresh()
			// app.refresh({
			// 	id: this.item.id,
			// 	app: 'yzf',
			// 	type: 1
			// });
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	height: 100%;
}
.cl-crud {
	padding: 0;
	::v-deep .el-row--1 {
		padding: 0 10px;
	}
	::v-deep .crud-data-table {
		padding: 0 10px;
	}
	::v-deep .el-row:last-child {
		padding: 0 10px;
	}
}
.slot-top {
	width: 100%;
	.slot-top-c {
		// height: 168px;
		padding: 18px 36px 22px 26px;
		background: rgba(255, 255, 255, 1);
		border-radius: 8px;
		font-size: $font16;
		@include flexBox(flex-start);
		color: $main-light;
		padding-left: 15px;
		.l {
			@include flexBox(center, space-between, column);
			color: #333333;
			flex: 2;
			& > div:nth-child(1) {
				font-size: $font14;
				cursor: pointer;
				&:hover {
					opacity: 0.7;
				}
			}
			& > div:nth-child(2) {
				font-size: $font18;
				font-weight: bold;
				margin-top: 10px;
			}
			& > div:nth-child(3) {
				font-size: $font16;
				@include flexBox(center, space-between);
				margin-top: 10px;
				& > div {
					@include flexBox(center, center, column);
					flex: 1;
					& > span:nth-child(1) {
						color: #999999;
					}
					& > span:nth-child(2) {
						color: #666666;
						margin-top: 5px;
					}
				}
				& > div:nth-child(1) {
					align-items: flex-start;
					text-align: left;
					flex: 3;
					& > span:nth-child(2) {
						color: #999999;
						margin-top: 5px;
					}
				}
			}
		}
		.r {
			flex: 2;
			@include flexBox();
			padding-left: 60px;
			.imgs {
				width: 94px;
				height: 94px;
				cursor: pointer;
				img {
					width: 100%;
				}
			}
			.d {
				color: #666666;
				font-size: 12px;
				margin-left: 9px;
				@include flexBox(space-between, flex-start, column);
				height: 94px;
				flex: 1;
				a {
					color: $text-title;
					cursor: pointer;
					&:hover {
						color: $color-link;
					}
				}

				& > div:nth-child(1) {
					@include ellipsis();
					// width: 0;
					color: #333333;
					font-size: 16px;
					font-weight: bold;
					// max-width: 300px;
				}
				& > div:nth-child(3) {
					@include flexBox(space-between, flex-start);
					width: 100%;
					align-items: center;
					.copys {
						width: 156px;
						border: 1px solid rgba(77, 183, 243, 0.27);
						border-radius: 17px;
						color: #4db7f3;
						padding: 5px;
						text-align: center;
						cursor: pointer;
					}
				}
			}
		}
	}
	.slot-top-l {
		height: 10px;
		background-color: $bg-grey;
		width: 100%;
	}
}
.filter-box {
	@include flexBox();
}
.filter-bar {
	::v-deep .el-input__inner {
		width: 150px;
	}
	div {
		margin-right: 10px;
		display: inline-block;
	}
}
.info {
	p {
		@include ellipsis();
		width: 200px;
	}
}
</style>
